<template>

    <div class="data-store-container">

        <div class="store-panel">

            <div class="title">
                数据收藏

                <div class="close-icon" @click="close">
                    <i class="iconfont icon-close"></i>
                </div>

            </div>

            <div class="form-container">    
                <div class="sub-title">选择收藏夹</div>
                <div class="store-options">
                    
                    <g-scrollbar class="store-vertical-scroll">
                        <div class="bookMarks">
                            <g-checkbox
                                v-for="option in bookMarks"
                                :key="option.key"
                                :value="option.key"
                                :label="option.key"
                                :model="storedGroups"
                                v-on:change="setVal"> {{option.name}}</g-checkbox>
                        </div>
                    </g-scrollbar>
                    <div v-if="waiting" class="waiting-panel">
                        <i class="iconfont icon-loading icon-spin" ></i>
                    </div>
                </div>
            </div>

            <div class="button-container">
                <g-button class="btn default store-btn-size" @click="close" >取消</g-button>
                <g-button class="btn primary store-btn-size confirm-btn" type="primary" @click="add" :disabled="waiting" :loading="loading">{{loading ? '操作中...' : '确定'}}</g-button>
            </div>
        </div>

    </div>
</template>

<script>

    import GCheckbox from 'components/common/g-checkbox'
    import GScrollbar from 'components/common/g-scrollbar'
    import GButton from 'components/common/g-button'
    import {bookmark as bookmarkAPI} from '@/api'

    export default {

        data: function() {
            return {
                storedKey: '',
                waiting: false,
                loading: false,

                storedGroups: [],

                storedGroups_bak: [],
            }
        },

        components:{
            GCheckbox,
            GButton,
            GScrollbar
        },

        props:{
           storeData: Object,
           bookMarks: Array,
           dataType: String,
        },

        async mounted () {
            await this.getStored();
        },

        methods: {

            close() {
                this.$emit('close-store');
            },

            async getStored () {
                this.waiting = true;

                let result = await bookmarkAPI.getStored(this.storeData.uid);

                if (!result || result.data.code != 0) {
                    this.close();
                    this.waiting = false;
                    this.$message.error('获取收藏信息失败');
                    return;
                }

                let data = result.data.data;

                let stored = data.bookmarks;

                this.storedGroups = stored;
                this.storedGroups_bak = this.storedGroups.sort().toString() || [];

                this.waiting = false;
                if(stored.length>0){
                    this.$message.warning('勾选收藏夹中已收藏此数据，取消勾选可取消收藏！');
                }
            },

            setVal (val) {
                this.storedGroups = val;
            },

            async add () {

                if (this.storedGroups.sort().toString() == this.storedGroups_bak) {
                    this.close();
                    return;
                };

                this.loading = true;
                
                console.log(this.dataType);
                
                //let dataType = (this.dataType.split('-')[0] === 'public') ? 'public' : 'private';
                let dataType = "public";
                if(this.$store.state.data_nav_key == 'private-data'){
                    let dom = document.querySelector('.private-upload-res');
                    if(dom.classList.contains('active')){
                        dataType = "private";
                    }
                }
                
                let type = this.dataType.split('-')[1];

                let params = {
                    bookmarkUids: this.storedGroups || [],
                    dataUid: this.storeData.uid,
                    dataType,
                    type
                };

                // console.log(params);
                
                let result = await bookmarkAPI.addDatas(params);

                if (!result) {
                    this.$emit('store-result', {code: 1, bookmarkUid: null});
                    this.loading = false;
                    return;
                }

                if (result.data.code != 0) {
                    this.$emit('store-result', {code: result.data.code, bookmarkUid: null});
                    this.loading = false;
                    return;
                }

                this.loading = false;

                this.$emit('store-result', {code: 0, bookmarkUid: this.storedGroups});

            }
        },
    }
</script>

<style lang="scss" rel="stylesheet/scss">

    @import "common";

    .data-store-container {

        // position: absolute;
        // @include absolute (0px, 0px, 0px, 0px);
        position: fixed;
        z-index: 1002;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, .5);

        .store-panel{
            position: absolute;
            left: 20px;
            right: 20px;
            width: 424px;
            margin: 0 auto;
            top: 50%;
            transform: translateY(-50%);
            background: $bgWhite;
            z-index: 10;
            border-radius: $bdRadius;
            box-shadow:0 4px 10px 1px rgba(48,59,70,0.20);
            @include user-select(none);

            div{
                @include box-sizing(border-box);
            }

            >.title {

                overflow: hidden;
                width: 100%;
                height: 50px;
                line-height: 48px;
                font-size: $fontSizeBase;
                font-weight: 500;
                padding: 0 14px;
                position: relative;
                background-color: $bgWhite;
                border-top-left-radius: $bdRadius;
                border-top-right-radius: $bdRadius;
                border-bottom: 1px solid $bdGray;

                .close-icon{
                    float: right;
                    cursor: pointer;

                    &:hover{
                        color: $primary;
                    }

                    >i {
                        font-size: 20px;
                    }
                }
            }

            >.form-container {
                padding: 40px 24px 18px;
                // background-color: $bgMessage;
                font-size: $fontSizeSmall;
                position: relative;

                .sub-title {
                    font-size: $fontSizeMini;
                    color: #545e65;
                    position: absolute;
                    top: 12px;
                    left: 24px;
                }

                .store-options {

                    height: 140px;
                    border: 1px solid $bdGray;
                    border-radius: $bdRadius;
                    background-color: #fff;
                    position: relative;

                    .bookMarks {
                        padding: 16px;
                        overflow: hidden;

                        >label {
                            display: block;
                            margin-bottom: 8px;
                        }
                    }

                    >.store-vertical-scroll {
                        width: 100%;
                        height: 100%;

                        .g-scrollbar-scrollbar-vertical{
                            width: 6px !important;
                            .scrollbar.g-scrollbar-transition {
                                width: 6px !important;
                                border-radius: 3px;
                            }
                        }

                        .scrollbar{
                            display: block !important;
                            width: 6px !important;
                            background-color: #9e9e9e;
                        }
                    }

                    .waiting-panel {
                        @include absolute (0px, 0px, 0px, 0px);
                        background: rgba(255, 255, 255, .5);
                        line-height: 130px;
                        text-align: center;

                        >i {
                            color: $gray;
                        }
                    }
                }
            }

            .button-container {
                padding: 0 24px 12px;
                // background-color: $bgMessage;
                text-align: right;
                height: 50px;

                .confirm-btn {
                    margin-left: 10px;
                }
            }

        }

    }

</style>
